import { Image, Text, View } from '@tarojs/components'
import { useCallback, useState } from 'react'
import ImageGalleryModal from '../image-gallery-modal'
import './index.less'

export interface ImageItem {
  src: string
}

export interface ImageGalleryProps {
  images: ImageItem[]
  height?: number
  onImageClick?: (index: number) => void
  className?: string
}

const ImageGallery: React.FC<ImageGalleryProps> = ({ images, height = 300, onImageClick, className = '' }) => {
  const [showImageGallery, setShowImageGallery] = useState(false)

  const handleImageClick = useCallback(
    (index: number) => {
      onImageClick?.(index)
      setShowImageGallery(true)
    },
    [onImageClick],
  )

  const handleCloseImageGallery = () => {
    setShowImageGallery(false)
  }

  const renderSingleImage = () => (
    <View className='image-gallery single-image' style={{ height: `${height}px` }}>
      <View className='image-container' onClick={() => handleImageClick(0)}>
        <Image src={images[0].src} className='gallery-image' mode='aspectFill' />
      </View>
    </View>
  )

  const renderTwoImages = () => (
    <View className='image-gallery two-images' style={{ height: `${height}px` }}>
      <View className='image-grid'>
        <View className='image-container' onClick={() => handleImageClick(0)}>
          <Image src={images[0].src} className='gallery-image' mode='aspectFill' />
        </View>
        <View className='image-container' onClick={() => handleImageClick(1)}>
          <Image src={images[1].src} className='gallery-image' mode='aspectFill' />
        </View>
      </View>
    </View>
  )

  const renderThreeImages = () => (
    <View className='image-gallery three-images' style={{ height: `${height}px` }}>
      <View className='image-grid'>
        <View className='main-image'>
          <View className='image-container' onClick={() => handleImageClick(0)}>
            <Image src={images[0].src} className='gallery-image' mode='aspectFill' />
          </View>
        </View>
        <View className='sub-images'>
          <View className='sub-image'>
            <View className='image-container' onClick={() => handleImageClick(1)}>
              <Image src={images[1].src} className='gallery-image' mode='aspectFill' />
            </View>
          </View>
          <View className='sub-image'>
            <View className='image-container' onClick={() => handleImageClick(2)}>
              <Image src={images[2].src} className='gallery-image' mode='aspectFill' />
            </View>
          </View>
        </View>
      </View>
    </View>
  )

  const renderMultipleImages = () => {
    const remainingCount = images.length - 3
    return (
      <View className='image-gallery multiple-images' style={{ height: `${height}px` }}>
        <View className='image-grid'>
          <View className='main-image'>
            <View className='image-container' onClick={() => handleImageClick(0)}>
              <Image src={images[0].src} className='gallery-image' mode='aspectFill' />
            </View>
          </View>
          <View className='sub-images'>
            <View className='sub-image'>
              <View className='image-container' onClick={() => handleImageClick(1)}>
                <Image src={images[1].src} className='gallery-image' mode='aspectFill' />
              </View>
            </View>
            <View className='sub-image overlay'>
              <View className='image-container' onClick={() => handleImageClick(2)}>
                <Image src={images[2].src} className='gallery-image' mode='aspectFill' />
              </View>
              <View className='overlay-content'>
                <Text className='overlay-text'>+{remainingCount} 张</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }

  const renderGallery = () => {
    if (!images || images.length === 0) {
      return null
    }

    switch (images.length) {
      case 1:
        return renderSingleImage()
      case 2:
        return renderTwoImages()
      case 3:
        return renderThreeImages()
      default:
        return renderMultipleImages()
    }
  }

  return (
    <View className={`image-gallery-wrapper ${className}`}>
      {renderGallery()}

      {showImageGallery && (
        <ImageGalleryModal
          images={images.map((img, index) => ({
            id: String(`img-${index}`),
            src: img.src,
            title: `效果图 ${index + 1}`,
          }))}
          initialIndex={0}
          onClose={handleCloseImageGallery}
        />
      )}
    </View>
  )
}

export default ImageGallery
